/*
* 成本中心报表存在一个或者多个，这里统一渲染
* */
import {messages} from "share/common";
import React from 'react';
import 'styles/data-center/report/travel-report/fee-report/components/cost-center-chart/cost-center-chart.scss';
import VscrollCharts from 'components/template/vscroll-echarts/vscroll-echarts';
class CostCenterChart extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      costCenters: [],
      data: [],
      options: [],
    }
  }
  //挂载组件到父级组件
  componentDidMount() {
    const {onRef, options} = this.props;
    onRef && onRef(this);
    this.setState({
      options
    })
  }
  resetChartOption = (options) => {
    this.setState({
      options
    })
  };
  onMountCostCenterChart = () => {
    //直接利用了 setState 重新渲染了全部的成本中心图表
  };
  clickCostCenterItem = (params,chartIndex) => {
    this.props.clickEcharts(params,chartIndex)
  };
  renderChartTitle=(options)=>{
    let title = options ? options.title._text : "";
    return title

  }
  //渲染单个成本中心
  renderSingerCostCenter = (item, index) => {
    let options = item.costCenterExpenseEntity;
    return (<div className='echarts-item-title-wrap'>
      <div className="echarts-title">{this.renderChartTitle(options)}</div>
      <div className="echarts-item-wrap">
        <VscrollCharts options={options}
                 height={this.props.echartsHeight}
                 width={this.props.echartsWidth}
                 wrapClassName={'echarts-item-CostCenterItem' + index}
                 clickEcharts={this.clickCostCenterItem}
                 chartIndex={index}
                 onRef={this.onMountCostCenterChart}
                 className="echarts-item"/>
      </div>
    </div>)
  };

  render() {
    let {options} = this.state;
    return (
      <div className='cost-center-chart'>
        <div>
          {options.map((item, index) => this.renderSingerCostCenter(item, index))}
        </div>
        <div className="clear"/>
      </div>
    )
  }
}

CostCenterChart.propTypes = {
  echartsWidth: React.PropTypes.any,
  echartsHeight: React.PropTypes.any,
  options: React.PropTypes.any,//渲染需要的数据
  clickEcharts: React.PropTypes.any,//点击当前图表回调事件
  onRef: React.PropTypes.any,//挂载当前组
};

CostCenterChart.defaultProps = {};

export default CostCenterChart;
